<template>
  <div class="flex justify-center align-center flex-no-wrap">
    <slot name="prefix"/>
    <el-tooltip effect="dark" :content="'点击查看《'+name+'》'" placement="top" v-if="!disabled && !!showTip">
      <el-button :class="[className, ...classNames, 'has-link']" :size="size" type="text" @click.stop="toDetail(id)">
        {{ !!title ? (title + '：') : '' }}{{ name }}
      </el-button>
    </el-tooltip>
    <el-button :class="[className, ...classNames, 'no-link']" :size="size" type="text" v-if="!!disabled || (!disabled && !showTip)

		"
    >{{ !!title ? (title + '：') : '' }}{{ name }}
    </el-button>
    <BFViewDetailBtnExpand :classNames="[className, ...classNames]" :width="expandWidth"
                           v-if="!disabled && !!showExpand"
    >
      <slot name="expandContent"/>
    </BFViewDetailBtnExpand>
  </div>
</template>

<script>
import common from '@/utils/common.js'
import {
  cloneDeep
} from 'lodash'
import BFViewDetailBtnExpand from './BFViewDetailBtnExpand'

export default {
  name: 'BFViewDetailBtn',
  components: {
    BFViewDetailBtnExpand
  },
  props: {
    id: {
      type: [Number, String, Array]
    },
    name: {
      type: String,
      require: true
    },
    title: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'mini'
    },
    className: {
      type: String,
      default: ''
    },
    classNames: {
      type: Array,
      default: () => ([])
    },
    disabled: {
      type: Boolean,
      default: false
    },
    showTip: {
      type: Boolean,
      default: false
    },
    showExpand: {
      type: Boolean,
      default: false
    },
    expandWidth: {
      type: [String, Number],
      default: 400
    }
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {
  },
  methods: {
    toDetail(id) {
      this.$emit('toDetail', id)
    }
  }
}
</script>

<style lang="scss" scoped>
.has-link {
  text-decoration: underline;
}

.no-link {
  cursor: auto;
}

.has-link,
.no-link {
  line-height: 24px;
}
</style>
